/* 完成头像的更换
 */
//申明一个全局变量
let baseStr64=""
//完成点击事件
$(".select").on("click",function () {
    $("#file").click()
})

//完成change事件
$("#file").on("change",function (e) {
    let file=e.target.files
    if(file.length===0) return
    // console.log(file[0]);
    //获取地址
   let theUrl= window.URL.createObjectURL(file[0])
   $("#image").prop("src",theUrl)
//将地址转为64位字符串方法
    const reader = new FileReader();
    if(file[0]) {
    reader.readAsDataURL(file[0]);
    reader.onloadend = function () {
        baseStr64 = reader.result
     }	
    }  
//得到的64字符串还需要去掉特殊符号
})

//完成上传图片事件
/* 1.给按钮注册点击事件
2.将数据获取到,给后台发送请求
3.验证通过后,将图片信息渲染*/
$(".sure").on("click",function () {
    if(!baseStr64) return layer.msg("请上传图片")
    const data=`avatar=${encodeURIComponent(baseStr64)}`
    //查看文档发现,这里avatar属性名对应的图片格式是base64位的
    axios.post("http://api-breakingnews-web.itheima.net/my/update/avatar" ,data,
    {headers:{Authorization:localStorage.getItem("token")}}).then(({data:res})=>{
        // console.log(res);
        layer.msg(res.message)
        if(res.status===0) {  //上传成功后,需要选择的图片在图片框中显示
            window.parent.youData()
        }
    })
})

//需要完成页面的从新渲染,目的就是让更改的图片在图片框中显示

/* 完成页面图片本地渲染 ====点击切换页面,其实就是触发了跳转功能,也就是发送了一次请求
现在的数据都是和后台服务器动态交互的结果,也就是是说,页面任何地方的变动,基本都是和后台服务发送请求
让后在返回数据渲染的结果 */
axios.get(
    "http://api-breakingnews-web.itheima.net/my/userinfo",
    {headers:{Authorization:localStorage.getItem("token")}}
).then(({data:res})=>{
    if(res.status===0) {  //这个判断里面是获取信息成功
        let { user_pic}=res.data
        if(user_pic){  
            $("#image").prop("src",user_pic)
        }
    }    
})






